<template>
	<view class="video">
		<video id="myVideo_1" :src="src" @play="videoPlay" @pause="videoPause" @click="videoClick" @timeupdate="videoTimeupdate" @ended="videoEnded" :controls="true"></video>
		<view class="video-wrapper" v-if="isshow_waraper">
			<view class="top">
				<text @click="playTypeClick">{{playType.text}}</text>
				<text @click="rateClick">倍速</text>
			</view>
		</view>
		<!-- <image v-if="isshow_waraper" @click="seekTime(1)" class="l_d" src="../../static/v_d (1).png" mode="widthFix"></image>
		<image v-if="isshow_waraper" @click="seekTime(2)" class="r_d" src="../../static/v_d (2).png" mode="widthFix"></image> -->
		
		
		<popupBox ref="videoRate" type="bottom" :isSlot="true">
			<view class="popup-box">
				<view class="item" v-for="(item,i) in rateList" :class="rate==item ? 'select' : ''" :key="i" @click="setVideoRate(item)">
					{{item}}
				</view>
				<view class="cancel" @click="closeRate()">
					<text>取消</text>
				</view>
			</view>
		</popupBox>
		<popupBox ref="play_type" type="bottom" :isSlot="true">
			<view class="popup-box">
				<view class="item" v-for="(item,i) in playTypeList" :class="playType.value==item.value ? 'select' : ''" :key="i" @click="setPlayType(item)">
					{{item.text}}
				</view>
				<view class="cancel" @click="closePlayType()">
					<text>取消</text>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import popupBox from '@/components/popup/popup'
	export default {
		name:"my_video",
		components:{
			popupBox
		},
		props:{
			src:{
				type:String,
				default:''
			},
		},
		data() {
			return {
				isshow_waraper:false,
				isshow_waraper_timeout:null,
				isPause:true,
				video_currentTime:0,
				all_Time:0,
				videoContext:null,
				rateList:['0.5','0.8','1.0','1.25','1.5'],
				rate:'1.0',
				playTypeList:[
					{
						text:'单集播放',
						value:'1'
					},
					{
						text:'单集循环',
						value:'2'
					},
					{
						text:'连续播放',
						value:'3'
					},
				],
				playType:{
					text:'单集播放',
					value:'1'
				},
			};
		},
		created() {
		},
		deactivated() {
			this.videoContext.pause()
		},
		destroyed() {
			this.videoContext.pause()
		},
		methods:{
			init(){
				this.videoContext = uni.createVideoContext('myVideo_1')
				this.setVideoRate()
			},
			
			pause(){
				this.videoContext.seek(0)
				this.videoContext.pause()
				// this.isshow_waraper = false
			},
			play(){
				this.videoContext.play()
			},
			
			// 倍速
			rateClick(){
				this.$refs.videoRate.open()
			},
			closeRate(){
				this.$refs.videoRate.close()
			},
			setVideoRate(rate){
				this.rate = rate
				this.videoContext.playbackRate(Number(rate))
				this.closeRate()
			},
			
			// 单机播放
			playTypeClick(){
				this.$refs.play_type.open()
			},
			closePlayType(){
				this.$refs.play_type.close()
			},
			setPlayType(data){
				this.playType = data
				this.closePlayType()
			},
			
			videoEnded(){
				if(this.playType.value=='1'){
					this.videoContext.seek(0)
					this.videoContext.pause()
				}else if(this.playType.value=='2'){
					this.videoContext.seek(0)
					this.videoContext.play()
				}else{
					this.$emit('nextVideo')
				}
			},
			
			
			videoPlay(){
				clearTimeout(this.isshow_waraper_timeout)
				this.isPause = false
				this.isshow_waraper = true
				this.isshow_waraper_timeout =  setTimeout(()=>{
					this.isshow_waraper = false
				},5000)
			},
			videoPause(){
				clearTimeout(this.isshow_waraper_timeout)
				this.isPause = true
				this.isshow_waraper = false
			},
			videoClick(){
				this.isshow_waraper = !this.isshow_waraper
				clearTimeout(this.isshow_waraper_timeout)
				if(this.isshow_waraper&&!this.isPause){
					this.isshow_waraper_timeout =  setTimeout(()=>{
						this.isshow_waraper = false
					},5000)
				}
			},
			videoTimeupdate(e){
				let {currentTime, duration} = e.detail
				this.video_currentTime = Math.floor(currentTime)
				this.all_Time = Math.floor(duration)
				console.log(currentTime, duration)
				this.$emit('videoTimeupdate',e)
			},
			seekTime(type){
				this.videoContext.seek(10)
				console.log('-----seek')
				return
				if(this.video_currentTime<15){
					if(type==1){
						this.videoContext.seek(0)
					}else{
						if((this.all_Time-this.video_currentTime)>15){
							this.videoContext.seek(this.video_currentTime+15)
						}else{
							this.videoContext.seek(this.all_Time-2)
						}
					}
				}else{
					if(type==1){
						this.videoContext.seek(this.video_currentTime-15)
					}else{
						if((this.all_Time-this.video_currentTime)>15){
							this.videoContext.seek(this.video_currentTime+15)
						}else{
							this.videoContext.seek(this.all_Time)
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>

		.video{
			width: 100%;
			height: 100%;
			video{
				width: 100%;
				height: 100%;
			}
			position: relative;
			&>.video-wrapper{
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				text-align: right;
				padding: 22rpx;
				box-sizing: border-box;
				text{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
					margin-left: 20rpx;
				}
			}
			.l_d{
				width: 68rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 100rpx;
				z-index: 1;
			}
			.r_d{
				width: 68rpx;
				height: 60rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 100rpx;
				z-index: 1;
			}
		}

	.popup-box{
		width: 100%;
		.item{
			height: 96rpx;
			text-align: center;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 96rpx;
			&.select{
				background: #FFF2F2;
				color: #E72A2A;
				font-weight: bold;
			}
		}
		.cancel{
			padding: 30rpx 0 20rpx;
			border-top: 10rpx solid rgba(153, 153, 153, 0.1);
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #999999;
			line-height: 44rpx;
		}
	}
</style>